<template>
	<view class="container">
		<view class="banner">
			<image class="banner-img" src="../../static/detail@2x.jpg" mode="widthFix"></image>
		</view>

		<view class="tabs-wrapper">
			<v-tabs v-model="activeTab" :scroll="false" :tabs="['场地信息', '设备详情']" @change="changeTab" lineHeight="6rpx"
				color="#0091FF" activeColor="#0091FF"></v-tabs>
		</view>

		<!-- 场地信息 -->
		<view v-show="showStationInfo">
			<view class="card info-card">
				<view class="header">
					<text class="title">{{stationInfo.stationName}}</text>
					<text class="status-tag active">运营中</text>
				</view>

				<view class="content-section">
					<view class="info-item">
						<text class="info-label">地　　址：</text>
						<text class="info-content">{{stationInfo.address}}</text>
					</view>

					<view class="grid-col-2">
						<view class="info-item">
							<view class="info-label-box">
								<text class="info-label">营业时间：</text>
							</view>
							<text class="info-content">8:00-18:00</text>
						</view>
						<view class="info-item">
							<view class="info-label-box">
								<text class="info-label">服务电话：</text>
							</view>
							<text class="info-content nowrap">010-88486655</text>
						</view>
					</view>

					<view class="grid-col-2">
						<view class="info-item">
							<text class="info-label">场站类型：</text>
							<text class="info-content">公共</text>
						</view>
						<view class="info-item">
							<text class="info-label">运营方式：</text>
							<text class="info-content">自营</text>
						</view>
					</view>
				</view>

				<view class="stats-bar">
					<view class="stat-item">
						<image class="stat-icon" src="/static/detail-distance@2x.png"></image>
						<text class="stat-value">1.2km</text>
					</view>
					<view class="divider"></view>
					<view class="stat-item">
						<image class="stat-icon" src="/static/detail-fast@2x.png"></image>
						<text class="stat-value">10/20</text>
					</view>
					<view class="divider"></view>
					<view class="stat-item">
						<image class="stat-icon" src="/static/detail-slow@2x.png"></image>
						<text class="stat-value">5/10</text>
					</view>
				</view>
			</view>

			<view class="card promotion-card">
				<view class="section-header">
					<view class="blue-line"></view>
					<text class="section-title">促销活动</text>
				</view>

				<view class="promotion-grid">
					<view class="promotion-item">
						<view class="promotion-content">
							<image class="money-icon" src="/static/detail-money-icon.png"></image>
							<text class="amount">20</text>
							<view class="promotion-detail">
								<text>充2000</text>
								<text>限部分场站</text>
							</view>
						</view>
					</view>

					<view class="promotion-item">
						<view class="promotion-content">
							<image class="money-icon" src="/static/detail-money-icon.png"></image>
							<text class="amount">50</text>
							<view class="promotion-detail">
								<text>充5000</text>
								<text>限部分场站</text>
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="card fee-card">
				<view class="section-header">
					<view class="blue-line"></view>
					<text class="section-title">收费说明</text>
				</view>

				<view class="fee-list">
					<view class="fee-item">电　　费：1.01元/度</view>
					<view class="fee-item">服 务 费：0.55元/度</view>
					<view class="fee-item">停 车 费：免费停车2小时；首小时5元；第二小时白天2元/小时；晚上1元/小时；封顶30元</view>
					<view class="fee-item">支付方式：线上</view>
				</view>
			</view>
		</view>

		<!-- 设备详情 -->
		<view v-show="showDevice" class="device-list">
			<uni-card v-for="(gunInfoVO, index) in gunInfoVOList" :key="index">
				<view class="device-card">
					<view class="device-info">
						<image class="device-icon" src="/static/detail-device-icon@2x.png"></image>
						<text class="device-name">{{gunInfoVO.gunName}}</text>
					</view>

					<view class="device-status">
						<view :class="['status-tag', statusClass(gunInfoVO.gunStatus)]">
							{{statusText(gunInfoVO.gunStatus)}}
						</view>
						<view class="device-spec">
							{{gunTypeText(gunInfoVO.gunType)}} 功率{{gunInfoVO.electricity}}KW
						</view>
					</view>

					<view :class="['action-btn', gunInfoVO.gunStatus === 1 ? 'active' : 'disabled']">
						去充电
					</view>
				</view>
			</uni-card>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				activeTab: 0,
				showStationInfo: true,
				showDevice: false,
				stationInfo: {},
				gunInfoVOList: []
			}
		},
		onLoad(options) {
			let id = options.id
			this.getStation(id)
			this.getGun(id)
		},
		methods: {
			statusClass(status) {
				return {
					1: 'status-idle',
					2: 'status-busy',
					3: 'status-error'
				} [status]
			},
			statusText(status) {
				return {
					1: '空闲',
					2: '使用中',
					3: '故障'
				} [status]
			},
			gunTypeText(type) {
				return type === 1 ? '慢充' : '快充'
			},
			getStation(stationId) {
				uni.request({
					url: this.$baseUrl + "/device_api/device/station/detail/" + stationId,
					method: 'GET',
					success: (res) => {
						this.stationInfo = res.data.data
						this.gunInfoVOList = this.stationInfo.gunInfoPOList
					}
				})
			},
			changeTab(index) {
				this.showStationInfo = index === 0
				this.showDevice = index === 1
			}
		}
	}
</script>

<style lang="scss">
	.container {
		background-color: #f5f6f8;
		min-height: 100vh;
		padding-bottom: 30rpx;
	}

	.banner {
		&-img {
			width: 100%;
			height: 360rpx;
			display: block;
		}
	}

	.tabs-wrapper {
		background: #fff;
		padding: 0 20rpx;
	}

	.card {
		background: #fff;
		border-radius: 16rpx;
		margin: 24rpx;
		padding: 32rpx;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04);
	}

	.info-card {
		.header {
			display: flex;
			align-items: center;
			margin-bottom: 32rpx;

			.title {
				font-size: 36rpx;
				font-weight: 600;
				color: #333;
				margin-right: 20rpx;
			}
		}
	}

	.status-tag {
		font-size: 24rpx;
		padding: 6rpx 16rpx;
		border-radius: 8rpx;

		&.active {
			background: #e6f3ff;
			color: #0091FF;
		}
	}

	.content-section {
		.info-item {
			margin-bottom: 24rpx;
			display: flex;
			align-items: baseline;
			position: relative;
		}

		.info-label-box {
			display: flex;
			align-items: center;
			margin-bottom: 8rpx;
		}

		.info-label {
			color: #999;
			font-size: 26rpx;
			min-width: auto;
		}

		.info-content {
			color: #333;
			font-size: 28rpx;
			font-weight: 500;

			&.nowrap {
				white-space: nowrap;
				display: block;
				overflow: visible;
			}
		}
	}

	.grid-col-2 {
		grid-template-columns: repeat(auto-fit, minmax(300rpx, 1fr));
		gap: 32rpx;

		@media (max-width: 375px) {
			grid-template-columns: 1fr;
		}
	}

	.stats-bar {
		display: flex;
		align-items: center;
		background: #f9fafb;
		border-radius: 12rpx;
		padding: 24rpx 0;
		margin-top: 32rpx;

		.stat-item {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: center;

			.stat-icon {
				width: 32rpx;
				height: 32rpx;
				margin-right: 12rpx;
			}
		}

		.divider {
			width: 2rpx;
			height: 32rpx;
			background: #ddd;
		}
	}

	.section-header {
		display: flex;
		align-items: center;
		margin-bottom: 32rpx;

		.blue-line {
			width: 6rpx;
			height: 36rpx;
			background: #0091FF;
			margin-right: 16rpx;
			border-radius: 4rpx;
		}

		.section-title {
			font-size: 32rpx;
			font-weight: 500;
			color: #333;
		}
	}

	.promotion-grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 24rpx;

		.promotion-item {
			border: 2rpx solid #0091FF;
			border-radius: 12rpx;
			padding: 24rpx;

			.promotion-content {
				display: flex;
				align-items: center;

				.money-icon {
					width: 36rpx;
					height: 36rpx;
					margin-right: 12rpx;
				}

				.amount {
					font-size: 56rpx;
					color: #0091FF;
					font-weight: 600;
					margin-right: 16rpx;
				}

				.promotion-detail {
					display: flex;
					flex-direction: column;
					font-size: 24rpx;
					color: #666;
					line-height: 1.4;
				}
			}
		}
	}

	.fee-list {
		.fee-item {
			font-size: 28rpx;
			color: #666;
			line-height: 1.6;
			margin-bottom: 16rpx;
		}
	}

	.device-card {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 24rpx 0;

		.device-info {
			display: flex;
			flex-direction: column;
			align-items: center;
			min-width: 120rpx;

			.device-icon {
				width: 48rpx;
				height: 48rpx;
				margin-bottom: 12rpx;
			}
		}

		.device-status {
			flex: 1;
			margin: 0 32rpx;

			.status-tag {
				display: inline-block;
				padding: 6rpx 20rpx;
				border-radius: 24rpx;
				font-size: 24rpx;
				margin-bottom: 16rpx;

				&.status-idle {
					background: #e6f3ff;
					color: #0091FF;
				}

				&.status-busy {
					background: #fff3e0;
					color: #ff9830;
				}

				&.status-error {
					background: #ffe6e6;
					color: #ff4d4d;
				}
			}
		}

		.action-btn {
			width: 160rpx;
			height: 64rpx;
			border-radius: 64rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 28rpx;

			&.active {
				background: #0091FF;
				color: #fff;
			}

			&.disabled {
				background: #f5f5f5;
				color: #ccc;
			}
		}
	}
</style>